<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例5</title>
    <style>
        .msg{
            color: red;
            margin-left: 20px;
            font-weight: bold;
            font-size: 14px;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        function checkEmail(){
            $("#email_msg").text("");
            const email = $("#email").val()
            const regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/
            if(!regEmail.test(email)){
                $("#email_msg").text("邮箱只允许由英文字母，数字和下划线组成，必须包含\"@\"和\".\"");
                return false;
            }
            return true;
        }

        function checkUsername(){
            $("#username_msg").text("");
            const username = $("#username").val()
            const regUsername = /^\w{4,16}$/;
            if(!regUsername.test(username)){
                $("#username_msg").text("用户名由4~16位字母，数字和下划线组成");
                return false;
            }
            return true;
        }

        function checkPassword(){
            $("#password_msg").text("");
            const password = $("#password").val()
            const regPassword = /^\w{8,}$/;
            if(!regPassword.test(password)){
                $("#password_msg").text("密码由字母，数字和下划线组成，最少8个字符");
                return false;
            }
            return true;
        }

        function checkPassword2(){
            $("#password2_msg").text("");
            const password = $("#password").val()
            const password2 = $("#password2").val()
            if(password != password2){
                $("#password2_msg").text("两次密码必须一样");
                return false;
            }
            return true;
        }

        function checkMobile(){
            $("#mobile_msg").text("");
            const mobile = $("#mobile").val()
            const regMobile= /^(13|14|15|18)\d{9}$/;
            if(!regMobile.test(mobile)){
                $("#mobile_msg").text("手机号长度为11位，只能以13，14，15，18开头");
                return false;
            }
            return true;
        }

        $(function (){
            $("#form1").submit(function (){
                const r1 = checkEmail();
                const r2 = checkUsername();
                const r3 = checkPassword();
                const r4 = checkPassword2();
                const r5 = checkMobile();
                return r1 && r2 && r3 && r4 && r5;
            })

            $("#email").blur(checkEmail)
            $("#username").blur(checkUsername)
            $("#password").blur(checkPassword)
            $("#password2").blur(checkPassword2)
            $("#mobile").blur(checkMobile)
        })
    </script>
</head>
<body>
    <form id="form1" action="success.html">
        <p>
            邮箱 <input id="email"/> <span id="email_msg" class="msg"></span>
        </p>
        <p>
            用户名 <input id="username"/><span id="username_msg" class="msg"></span>
        </p>
        <p>
            密码 <input id="password"/><span id="password_msg" class="msg"></span>
        </p>
        <p>
            确认密码 <input id="password2"/><span id="password2_msg" class="msg"></span>
        </p>
        <p>
            手机号 <input id="mobile"/><span id="mobile_msg" class="msg"></span>
        </p>
        <p>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </p>
    </form>
</body>
</html>